<template>
  <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="props.listData">
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <!-- 下载 -->
        <template #actions>
          <span>
            <a-button type="link" @click="openDetail(item)">
              <FileTextOutlined />预览
            </a-button>
            <a :href="`/dev-api/ufs/preview/${item.fileId}`">
              <DownloadOutlined />下载
            </a>
            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(item.id)">
                <a-button type="link" danger>
                  <DeleteOutlined />删除
                </a-button>
              </a-popconfirm></AntdZh>
          </span>
        </template>
        <!-- 文件图片 -->
        <template #extra>
          <img v-if="item.fileType == 'docx' || item.fileType == 'doc'" width="130" alt="logo" :src="docx" />
          <img v-if="item.fileType == 'pptx'" width="120" alt="logo" :src="pptx" />
          <img v-if="item.fileType == 'pdf'" width="120" alt="logo" :src="pdf" />
        </template>
        <a-list-item-meta>
          <template #title>
            <a :href="`/dev-api/ufs/preview/${item.fileId}`">
              {{ item.fileName }}</a>
          </template>
          <template #avatar><a-avatar :src="item.avatar" /></template>
        </a-list-item-meta>
        {{ item.fileToolName }}
        <!-- {{ `摘要：${item.keyword || "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}` }} -->
      </a-list-item>
    </template>
  </a-list>
  <!-- 报告预览-->
  <a-drawer width="80%" title="详细信息" v-if="open" v-model:visible="open">
    <vue-office-docx v-if="fileType == 'docx' || fileType == 'doc'" :src="`/dev-api/ufs/download/${fileId}`" />
    <Vue-office-pdf v-if="fileType == 'pdf'" :src="`/dev-api/ufs/download/${fileId}`" />
  </a-drawer>
</template>
<script setup>
import docx from "@/assets/images/docx.svg";
import pptx from "@/assets/images/pptx.svg";
import pdf from "@/assets/images/pdf.svg";
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from "@vue-office/pdf";
import { DownloadOutlined, DeleteOutlined, FileTextOutlined } from "@ant-design/icons-vue";
import { queryList, deleteOne, updateOne, createOne } from '@/api/salvage/tranFile.js'
import useApp from "@/hooks";
const { $ } = useApp();
const props = defineProps({
  toolType: {
    type: String,
  },
  fileType: {
    type: String,
  },
  listData:{
    type: Array,
  }
});

const listData = ref(props.listData)
const fileId = ref('')
const open = ref(false)
const fileType = ref()
const emit = defineEmits(["getFileList"]);

watch(() => props.toolType, () => {
  // query.value.fileToolType = props.fileType
  // query.value.fileToolName = props.toolType
  emit("getFileList", props.fileType);
});
emit("getFileList", props.fileType);
// 删除
const del = (key) => {
  deleteOne(key).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    emit("getFileList", props.fileType);
  });
};
// function getList() {
//   queryList(query.value).then((res) => {
//     // 提取queryList文件的扩展名
//     res.content.forEach((item) => {
//       if (item.fileName !== null) {
//         let index = item.fileName.lastIndexOf("."); //获取索引位置
//         item.fileType = item.fileName.substr(index + 1); //截取从最后一个点号的下一个字符开始到字符串末尾的子字符串
//       }
//     });
//     listData.value = res.content;
//   });
// }
// getList();
// 预览
function openDetail(objId) {
  // console.log('objId', objId);
  fileType.value = objId.fileType
  open.value = true;
  fileId.value = objId.fileId
}
</script>